<template>
  <basic-container class="production-page">
    <el-row :gutter="20">
      <el-col :span="8" style="min-width: 300px">
        <div class="bindLeft" v-loading="bindLeftLoading" element-loading-text="条码信息查找中，请稍后..." element-loading-spinner="el-icon-loading">
          <h2>条码信息</h2>
          <avue-form ref="barCodeForm" v-model="barCode" :option="barCodeOption" @submit="submit">
            <template slot="sequenceNumber">
              <el-input
                name="sequenceNumber"
                placeholder="请输入 产品序列号"
                v-model="barCode.sequenceNumber"
                :clearable="true"
                suffix-icon="iconfont iconicon_scan"
                @keydown.enter.native="searchScanBarCode"
              ></el-input>
            </template>
          </avue-form>
        </div>
      </el-col>
      <el-col :span="16">
        <h2>拼版信息</h2>
        <avue-crud :page.sync="page" :option="option" :table-loading="loading" :data="data" ref="crud" @size-change="sizeChange" @current-change="currentChange"> </avue-crud>
      </el-col>
    </el-row>
    <el-dialog title="拼版解绑成功！请选择跳回工序" :visible.sync="showDialog" width="30%" append-to-body="true" @close="closeDialog">
      <avue-form ref="dialogForm" :option="dialogOption" v-model="dialogForm"></avue-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-check" @click="routeStationOperation">确 定</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="showDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getGroupProductInfo, unbind } from '@/api/product/splicingBoardUnbinding';
import { getPassStationRecords, skipRoute } from '@/api/product/productSerialNumManage';
import { focusInput, selectInput } from '@/util/helpers';
import { mapGetters } from 'vuex';
export default {
  name: 'ProductSplicingBoardUnbinding',
  components: {},
  data() {
    return {
      barCode: {},
      barCodeOption: {
        submitBtn: true,
        submitText: '解绑',
        emptyBtn: false,
        labelWidth: 100,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber',
            span: 24,
            rules: [
              {
                required: true,
                message: '请输入产品序列号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '产品编码',
            disabled: true,
            span: 24,
            prop: 'partNo'
          },
          {
            label: '产品名称',
            disabled: true,
            span: 24,
            prop: 'partName'
          },
          {
            label: '产品型号',
            disabled: true,
            span: 24,
            prop: 'partModel'
          },
          {
            label: '工单号',
            disabled: true,
            span: 24,
            prop: 'workOrderNo'
          }
        ]
      },
      data: [],
      loading: false,
      selectionList: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      option: {
        height: 'calc(100vh - 289px)',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 4,
        border: true,
        index: true,
        indexLabel: '序号',
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        columnBtn: false,
        selection: false,
        dialogClickModal: false,
        menu: false,
        labelWidth: 120,
        column: [
          {
            label: '产品序列号',
            prop: 'sequenceNumber'
          }
        ]
      },
      showDialog: false,
      dialogOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '工序',
            type: 'select',
            span: 24,
            prop: 'skipRouteId',
            dicData: [],
            rules: [
              {
                required: true,
                message: '请选择工序',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      currProcessRoutePreviousRouteIds: [],
      groupProductIds: ''
    };
  },
  computed: {
    ...mapGetters(['permission'])
  },
  mounted() {
    focusInput('sequenceNumber');
  },
  methods: {
    // 查找条码
    searchScanBarCode() {
      if (!this.barCode.sequenceNumber) {
        this.$message.warning('请输入产品序列号');
        return false;
      }
      this.loading = true;
      getGroupProductInfo(this.page.currentPage, this.page.pageSize, { sequenceNumber: this.barCode.sequenceNumber }).then(
        (res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.barCode.partNo = this.data[0] ? this.data[0].partNo : '';
          this.barCode.partName = this.data[0] ? this.data[0].partName : '';
          this.barCode.partModel = this.data[0] ? this.data[0].partModel : '';
          this.barCode.workOrderNo = this.data[0] ? this.data[0].workOrderNo : '';
          this.barCode.workOrderId = this.data[0] ? this.data[0].workOrderId : '';
          this.barCode.currRouteId = this.data[0] ? this.data[0].currRouteId : '';
          let currProcessRoutePreviousRouteIds = this.data[0] ? this.data[0].currProcessRoutePreviousRouteIds : '';
          this.currProcessRoutePreviousRouteIds = currProcessRoutePreviousRouteIds ? currProcessRoutePreviousRouteIds.split(',') : [];
          this.groupProductIds = this.data[0] ? this.data[0].groupProductIds : '';
          this.loading = false;
        },
        (error) => {
          this.loading = false;
          this.barCode = {};
          this.$refs.barCodeForm.resetFields();
          this.data = [];
          this.page = {
            pageSize: 20,
            currentPage: 1,
            total: 0
          };
          selectInput('sequenceNumber');
        }
      );
    },
    submit(form, done) {
      unbind(this.barCode.sequenceNumber).then(
        (res) => {
          let currRouteId = this.barCode.currRouteId;
          let workOrderId = this.barCode.workOrderId;
          let skipRouteId = this.findObject(this.dialogOption.column, 'skipRouteId');
          getPassStationRecords({ currRouteId, workOrderId }).then(
            (res) => {
              let stationList = res.data.data.map((d) => {
                return {
                  label: d.name,
                  value: d.id
                };
              });
              skipRouteId.dicData = [];
              this._forEach(this.currProcessRoutePreviousRouteIds, (item) => {
                let route = this._find(stationList, { value: item });
                if (route) {
                  skipRouteId.dicData.unshift(route);
                }
              });
              if (skipRouteId.dicData.length > 0) {
                this.showDialog = true;
              } else {
                this.$message.success('解绑成功，无可跳工序！');
                this.barCode = {};
                this.$refs.barCodeForm.resetFields();
                this.data = [];
                this.page = {
                  pageSize: 20,
                  currentPage: 1,
                  total: 0
                };
                focusInput('sequenceNumber');
              }
              done();
            },
            (error) => {
              skipRouteId.dicData = [];
              done();
            }
          );
        },
        (error) => {
          done();
        }
      );
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    routeStationOperation() {
      if (!this.dialogForm.skipRouteId) {
        this.$message.warning('请选择工序!');
        return;
      }
      skipRoute({
        toRouteId: this.dialogForm.skipRouteId,
        ids: this.groupProductIds
      }).then((res) => {
        this.$message.success(res.data.msg);
        this.showDialog = false;
        this.barCode = {};
        this.$refs.barCodeForm.resetFields();
        this.data = [];
        this.page = {
          pageSize: 20,
          currentPage: 1,
          total: 0
        };
        focusInput('sequenceNumber');
      });
    },
    closeDialog() {
      this.dialogForm = {};
      this.$refs.dialogForm.resetFields();
      this.barCode = {};
      this.$refs.barCodeForm.resetFields();
      this.data = [];
      this.page = {
        pageSize: 20,
        currentPage: 1,
        total: 0
      };
      focusInput('sequenceNumber');
    }
  }
};
</script>
<style lang="scss" scoped>
.packagingUnbindingPage {
  display: flex;
  .bindLeft {
    width: 20%;
    min-width: 300px;
    margin-right: 20px;
  }
  .bindRight {
    flex: 1;
  }
}
::v-deep .el-card .is-never-shadow {
  padding: 0 !important;
}
::v-deep .el-card {
  .avue-crud__menu {
    display: none;
  }
}
</style>
